{% extends 'layout.html' %} {% block style %}
<style>
#main {
    max-width: 1200px;
    min-width: 1020px;
    margin: 0 auto;
}

#plot11 {
    width: 100%;
    height: 250px;
    background-color: #222 !important;
    padding: 20px;
    position: relative;
}

#plot11 img {
    height: 55px;
    max-width: 100px;
    background-color: #fff;
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4);
}

#plot11 h4 {
    margin-top: 0;
    margin-left: 20px;
    display: inline-block;
    font-size: 16px;
    color: #f2f2f2;
}

#plot11 h4 span {
    margin-left: 12px;
    color: rgba(84, 148, 191, 1);
    font-size: 30px;
    position: relative;
    top: 3px;
}

#plot11 .tag {
    display: inline-block;
    background-color: rgba(180, 180, 180, 0.4);
    color: #ddd;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 12px;
}

#plot11 p {
    font-size: 12px;
    color: #ddd;
    margin-bottom: 8px;
}

#plot11 p span {
    color: #999;
    margin-left: 12px;
}

#plot11 p span.fa {
    margin-left: 0;
    margin-right: 4px;
}

#plot11 a {
    text-decoration: none;
}

#plot11 a:hover {
    text-decoration: none;
}

#plot12 {
    width: 100%;
    height: 250px;
    background-color: #222 !important;
}

#plot13 {
    width: 100%;
    height: 250px;
    background-color: #222 !important;
}

#plot21 {
    width: 100%;
    height: 300px;
    background-color: #222 !important;
}

#plot22 {
    width: 100%;
    height: 327px;
    background-color: #1b1b1b !important;
}

#plot23 {
    width: 100%;
    height: 300px;
    background-color: #222 !important;
    position: relative;
    overflow: hidden;
}

#plot23 .people {
    display: none;
    position: relative;
    width: 100%;
    height: 100%;
    padding: 20px;
}

#plot23 img {
    width: 80px;
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4);
    position: absolute;
    top: 20px;
    right: 20px;
}

#plot23 h5 {
    display: inline-block;
    font-size: 16px;
    color: #f2f2f2;
    margin-bottom: 15px;
}

#plot23 h5 span {
    margin-left: 6px;
    font-size: 14px;
    color: rgba(84, 148, 191, 1);
    position: relative;
    top: 1px;
}

#plot23 p {
    color: #999;
    font-size: 12px;
    line-height: 1.6;
    margin-right: 96px;
    max-height: 209px;
    overflow-y: hidden;
}

#plot23 #next {
    position: absolute;
    right: 29px;
    font-size: 40px;
    color: rgba(120, 120, 120, 0.4);
    bottom: 20px;
    transition: color .3s;
    -o-transition: color .3s;
    -ms-transition: color .3s;
    -moz-transition: color .3s;
    -webkit-transition: color .3s;
}

#plot23 #next:hover {
    cursor: pointer;
    color: rgba(160, 160, 160, 0.9);
}

#plot31 {
    width: 100%;
    height: 300px;
    background-color: #222 !important;
    padding: 20px;
}

#plot31 #news {
    height: 130px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    margin-right: 140px;
    position: relative;
}

#plot31 #comment {
    height: 110px;
    margin-right: 140px;
    position: relative;
}

#plot31 #news #news_title {
    color: rgb(84, 148, 191);
    font-size: 14px;
    margin-top: 0;
}

#plot31 #news #news_date {
    color: rgb(230, 157, 135);
    font-size: 12px;
}

#plot31 #news #news_source {
    color: rgb(221, 107, 102);
    font-size: 12px;
    margin-left: 10px;
}

#plot31 #news #news_summary {
    font-size: 12px;
    color: #bbb;
    max-height: 68px;
    overflow-y: hidden;
}

#plot31 #comment span.fa {
    color: rgb(84, 148, 191);
    font-size: 14px;
    margin-right: 6px;
}

#plot31 #comment #comment_user {
    color: rgb(84, 148, 191);
    font-size: 14px;
}

#plot31 #comment #comment_attitude {
    color: rgb(221, 107, 102);
    font-size: 12px;
    margin-left: 10px;
}

#plot31 #comment #comment_date {
    color: rgb(230, 157, 135);
    font-size: 12px;
}

#plot31 #comment #comment_content {
    font-size: 12px;
    color: #bbb;
    max-height: 51px;
    overflow-y: hidden;
}

#plot32 {
    width: 100%;
    height: 300px;
    background-color: #222 !important;
}

#plot4 {
    width: 100%;
    height: 300px;
    background-color: #222 !important;
    margin-bottom: 30px;
}

#param1 {
    position: absolute;
    left: 20px;
    top: 10px;
    color: rgb(221, 107, 102);
    font-size: 13px;
    z-index: 99;
    text-align: left;
}

#param1 span:first-child {
    padding-right: 10px;
}

#param1 span:last-child {
    padding-left: 10px;
}

#param1 span.fa {
    transition: color .3s;
    -o-transition: color .3s;
    -ms-transition: color .3s;
    -moz-transition: color .3s;
    -webkit-transition: color .3s;
    padding-top: 10px;
    padding-bottom: 10px;
}

#param1 span.fa:hover {
    cursor: pointer;
    color: #fff;
}

#param2 {
    position: absolute;
    right: 20px;
    top: 10px;
    color: #759AA0;
    font-size: 13px;
    z-index: 99;
    text-align: right;
}

#param2 span:first-child {
    padding-right: 10px;
}

#param2 span:last-child {
    padding-left: 10px;
}

#param2 span.fa {
    transition: color .3s;
    -o-transition: color .3s;
    -ms-transition: color .3s;
    -moz-transition: color .3s;
    -webkit-transition: color .3s;
    padding-top: 10px;
    padding-bottom: 10px;
}

#param2 span.fa:hover {
    cursor: pointer;
    color: #fff;
}

#plot41 {
    width: 100%;
    height: 300px;
    background-color: #222 !important;
    margin-bottom: 30px;
}

#plot5 {
    width: 100%;
    height: 400px;
    background-color: #222 !important;
    text-align: center;
    position: relative;
}

#plot5 #control_panel {
    color: #f2f2f2;
    position: absolute;
    left: 30px;
    top: 20px;
    background-color: transparent;
    padding: 10px;
}

#plot5 #control_panel .controller {
    margin-bottom: 5px;
    font-size: 12px;
}

#plot5 #control_panel .controller:hover {
    cursor: pointer;
}

#plot5 #control_panel .controller:hover>div {
    border: 1px #fff solid;
}

#plot5 #control_panel .controller>div {
    display: inline-block;
    margin-right: 10px;
    position: relative;
    top: 1px;
}

#plot5 #cell {
    color: #f2f2f2;
    position: absolute;
    left: 140px;
    top: 20px;
    width: 240px;
    background-color: transparent;
    padding: 10px;
    text-align: left;
}

#plot5 rect:hover {
    cursor: pointer;
    stroke: #fff;
}

#plot5 #cell h5 {
    font-size: 16px;
    margin-top: 0;
    color: #f2f2f2;
    line-height: 1.4;
}

#plot5 #cell p {
    font-size: 12px;
    color: #eee;
}
#search1, #search2 {
    position: fixed;
    top: 100px;
    left: 0;
    padding: 10px;
    z-index: 999;
    color: #f2f2f2;
    background-color: rgba(120,120,120,0.7);
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
#search2 {
    left: -263px;
}
#search2 .input-group {
    width: 200px;
}
#search2 input {
    display: inline-block;
    padding: 5px 10px;
    width: 200px;
    color: #333;
    background-color: rgba(200,200,200,0.7);
    border: none;
    box-shadow: none;
}
#search2 .input-group-addon:hover {
    cursor: pointer;
}
</style>
{% endblock %} {% block body %}
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=gW3cQ4s09L4KYCnxh7VKf26P"></script>
<div  id="search1">
    <div>其他平台</div>
</div>
<div id="search2">
    <div class="input-group">
        <input type="text" class="form-control"><span class="input-group-addon" style="border:none;"><span class="fa fa-fw fa-search"></span></span>
    </div>
</div>
<div class="row" style="margin-bottom:30px;">
    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
        <div class="plot-title">基本信息</div>
        <div id="plot11">
            <div>
                <img src="{{platform['logo']}}" alt="">
                <h4>OMNIRANK<span>{{platform['omnirank']}}</span></h4>
            </div>
            <div style="margin-top:15px;margin-bottom:20px;">
                {% for t in platform['tags'].split(',') %}
                <div class="tag">{{t}}</div>
                {% endfor %}
            </div>
            <div style="position:relative;">
                <div>
                    <p style="color:#aaa;"><span style="color:#aaa;" class="fa fa-fw fa-paper-plane"></span>上线时间<span>{{platform['lauchTime']}}</span></p>
                    <p style="color:#bbb;"><span style="color:#bbb;" class="fa fa-fw fa-trophy"></span>注册资金<span>{{platform['registMoney']}}</span></p>
                    <p style="color:#ccc;"><span style="color:#ccc;" class="fa fa-fw fa-star"></span>公司类型<span>{{platform['category']}}</span></p>
                    <p style="color:#ddd;"><span style="color:#ddd;" class="fa fa-fw fa-home"></span>平台官网<a href="http://{{platform['homepage']}}" target="_blank"><span>{{platform['homepage']}}</span></a></p>
                </div>
                <div style="position:absolute;right:0;top:0;">
                    <p style="text-align:center;color:#555;">平均利率</p>
                    <p style="font-size:40px;color:rgb(221,107,102);position:relative;top:-6px;">{{platform['averageProfit']}}</p>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
        <div class="plot-title">平台标的期限分布</div>
        <div id="plot12"></div>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
        <div class="plot-title">平台标的金额分布</div>
        <div id="plot13"></div>
    </div>
</div>
<div class="row" style="margin-bottom:30px;">
    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
        <div class="plot-title">位置信息</div>
        <div id="plot21"></div>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
        <div id="plot22"></div>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
        <div class="plot-title">人员信息</div>
        <div id="plot23">
            {% for p in people %}
            <div class="people" name="{{p['number']}}">
                <img src="{{p['portrait']}}" alt="">
                <h5>{{p['name']}}<span>{{p['position']}}</span></h5>
                <p>{{p['description']}}</p>
            </div>
            {% endfor %}
            <span id="next" class="fa fa-fw fa-chevron-right"></span>
        </div>
    </div>
</div>
<div class="row" style="margin-bottom:30px;">
    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
        <div class="plot-title">媒体新闻和用户评论</div>
        <div id="plot31">
            <div id="news">
                <h5 id="news_title"> </h5>
                <p><span id="news_date"> </span><span id="news_source"> </span></p>
                <p id="news_summary"> </p>
                <div style="position:absolute;right:-150px;top:20px;width:140px;text-align:center;" id="news_count">
                    <p style="text-align:center;color:#555;"></p>
                    <p style="font-size:40px;color:rgb(221,107,102);position:relative;top:-6px;"></p>
                </div>
            </div>
            <div id="comment">
                <h5 style="margin-top:0;"><span class="fa fa-fw fa-user"></span><span id="comment_user"> </span><span id="comment_attitude"> </span></h5>
                <p id="comment_date"> </p>
                <p id="comment_content"></p>
                <div style="position:absolute;right:-150px;top:0px;width:140px;text-align:center;" id="comment_count">
                    <p style="text-align:center;color:#555;"></p>
                    <p style="font-size:40px;color:rgb(221,107,102);position:relative;top:-6px;"></p>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
        <div class="plot-title">新闻媒体源分布</div>
        <div id="plot32">
        </div>
    </div>
</div>
<div class="row">
    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
        <div class="plot-title">平台关键词</div>
        <div style="position:relative;">
            <div id="plot41">
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
        <div class="plot-title">深度历史数据</div>
        <div style="position:relative;">
            <div id="param1">
                <span class="fa fa-fw fa-chevron-left"></span><span class="param">成交量</span><span class="fa fa-fw fa-chevron-right"></span>
            </div>
            <div id="param2">
                <span class="fa fa-fw fa-chevron-left"></span><span class="param">利率</span><span class="fa fa-fw fa-chevron-right"></span>
            </div>
            <div id="plot4">
            </div>
        </div>
    </div>
</div>
{% if platform['platName'] == '拍拍贷' %}
<div>
    <div class="plot-title">平台大事时间线</div>
    <div id="plot5">
        <div id="control_panel">
        </div>
        <div id="cell">
            <h5> </h5>
            <h6 style="color:#888;"> </h6>
            <p> </p>
        </div>
        <svg width="1000px" height="400px">
            <g></g>
        </svg>
    </div>
</div>
{% endif %}
<script>
$(document).ready(function() {
    $('#nav2').addClass('active');

    $('#search1').mouseenter(function(event) {
        $(this).animate({
            left: -76,
        },
            120, function() {
                $('#search2').animate({
                    left: 0
                }, 120);
        });
    });
    $('#search2').mouseleave(function(event) {
        $(this).animate({
            left: -263,
        },
            120, function() {
                $('#search1').animate({
                    left: 0
                }, 120);
        });
    });
    $('#search2 .input-group-addon').click(function(event) {
        var tmp = $(this).siblings('input').val();
        if (tmp != '') {
            window.location.href = "{{url_for('platform', platName='')}}" + tmp;
        }
    });

    var platformJson = eval({{platformJson|safe}});

    var peopleNumber = platformJson['peopleNumber'];
    var currentNumber = 1;

    $("#plot23 .people[name='1']").show();

    $('#plot23 #next').click(function() {
        // $("#plot23 .people[name='" + currentNumber + "']").fadeOut('fast', function() {
        //     currentNumber = currentNumber + 1;
        //     if (currentNumber > peopleNumber) {
        //         currentNumber = 1;
        //     }
        //     $("#plot23 .people[name='" + currentNumber + "']").fadeIn('fast');
        // });
        $("#plot23 .people[name='" + currentNumber + "']").removeClass('spaceInRight').addClass('magictime spaceOutLeft');
        setTimeout(function() {
            $("#plot23 .people[name='" + currentNumber + "']").hide().removeClass('spaceOutLeft');
            currentNumber = currentNumber + 1;
            if (currentNumber > peopleNumber) {
                currentNumber = 1;
            }
            $("#plot23 .people[name='" + currentNumber + "']").show().addClass('magictime spaceInRight');
        }, 200);
    })

    var map = new BMap.Map("plot21");
    var point = new BMap.Point({{platform['lng']}}, {{platform['lat']}});
    map.setMapStyle({
        style: 'light'
    });
    map.centerAndZoom(point, 15);
    var marker = new BMap.Marker(point);
    map.addOverlay(marker);
    map.addControl(new BMap.NavigationControl());

    var plot12 = echarts.init(document.getElementById('plot12'), 'dark');
    var option = {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        series: [{
            name: '标的期限分布',
            type: 'pie',
            radius: '50%',
            center: ['50%', '50%'],
            data: platformJson['bidTimeDist'],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }]
    };
    plot12.setOption(option);

    var plot13 = echarts.init(document.getElementById('plot13'), 'dark');
    option = {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        series: [{
            name: '标的金额分布',
            type: 'pie',
            radius: '50%',
            center: ['50%', '50%'],
            data: platformJson['bidMoneyDist'],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }]
    };
    plot13.setOption(option);

    var plot22 = echarts.init(document.getElementById('plot22'), 'dark');
    option = {
        tooltip: {
            formatter: function(obj) {
                var str = '';
                for (var i = 0; i < obj.data.data.length; i++) {
                    str = str + obj.data.x[i] + '  ' + obj.data.data[i] + obj.data.unit[i] + ',' + obj.data.value[i] + '%<br/>'
                }
                return str;
            }
        },
        radar: {
            shape: 'circle',
            indicator: [{
                name: '成交量',
                max: 100
            }, {
                name: '利率',
                max: 100
            }, {
                name: '历史待还',
                max: 100
            }, {
                name: '资金净流入',
                max: 100
            }, {
                name: '投资人数',
                max: 100
            }, {
                name: '借款人数',
                max: 100
            }, {
                name: '人均投资金额',
                max: 100
            }, {
                name: '人均借款金额',
                max: 100
            }, {
                name: '借款标数',
                max: 100
            }, {
                name: '平均借款期限',
                max: 100
            }, {
                name: '待收投资人数',
                max: 100
            }, {
                name: '待还借款人数',
                max: 100
            }, ],
            splitArea: {
                show: false
            },
            splitLine: {
                lineStyle: {
                    color: ['rgba(200, 200, 200, 0.3)']
                }
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(200, 200, 200, 0.3)'
                }
            },
            radius: '46%',
            center: ['50%', '50%'],
        },
        series: [{
            type: 'radar',
            symbol: 'none',
            data: [{
                x: platformJson['radar'].name,
                value: platformJson['radar'].value,
                data: platformJson['radar'].data,
                unit: platformJson['radar'].unit,
                label: {
                    normal: {
                        show: true,
                        formatter: function(params) {
                            return params.value;
                        }
                    }
                }
            }]
        }]
    };
    plot22.setOption(option);

    var news = platformJson['news'];
    var comment = platformJson['comment'];

    function switchNews() {
        var idx = Math.floor(Math.random() * news.length);
        $('#plot31 #news #news_title').text(news[idx].title);
        $('#plot31 #news #news_date').text(news[idx].timestamp);
        $('#plot31 #news #news_source').text(news[idx].source);
        $('#plot31 #news #news_summary').text(news[idx].summary);

        $('#plot31 #news #news_count p:first-child').text('新闻数量');
        $('#plot31 #news #news_count p:last-child').text(platformJson['newsCount']);

        for (;;) {
            idx = Math.floor(Math.random() * comment.length);
            if (comment[idx].attitude != '不推荐') break;
        }
        $('#plot31 #comment #comment_user').text(comment[idx].user);
        $('#plot31 #comment #comment_attitude').text(comment[idx].attitude);
        $('#plot31 #comment #comment_date').text(comment[idx].timestamp);
        $('#plot31 #comment #comment_content').text(comment[idx].content);

        $('#plot31 #comment #comment_count p:first-child').text('评论数量');
        $('#plot31 #comment #comment_count p:last-child').text(comment.length);
    }

    switchNews();
    setInterval(function() {
        switchNews();
    }, 5000);

    var plot32 = echarts.init(document.getElementById('plot32'), 'dark');

    function getLevelOption() {
        return [{
            itemStyle: {
                normal: {
                    borderWidth: 0,
                    gapWidth: 1
                }
            }
        }, {
            itemStyle: {
                normal: {
                    gapWidth: 1
                }
            }
        }, {
            colorSaturation: [0.35, 0.5],
            itemStyle: {
                normal: {
                    gapWidth: 1,
                    borderColorSaturation: 0.6
                }
            }
        }];
    }
    plot32.setOption(option = {
        tooltip: {
            formatter: function(info) {
                var value = info.value;
                var name = info.name;

                return [
                    '<div class="tooltip-title">' + name + '</div>',
                    '新闻数量 ' + value,
                ].join('');
            }
        },
        series: [{
            name: '新闻门户',
            type: 'treemap',
            visibleMin: 1,
            roam: false,
            breadcrumb: {
                show: false
            },
            label: {
                show: true,
                formatter: '{b}'
            },
            itemStyle: {
                normal: {
                    borderColor: '#fff',
                }
            },
            levels: getLevelOption(),
            data: platformJson['newsStat'],
            animationDuration: 800
        }]
    });

    require(
        [
            'echarts',
            'echarts/chart/wordCloud' // 使用柱状图就加载bar模块，按需加载
        ],
        function(ec) {
            var plot41 = ec.init(document.getElementById('plot41'));

            var option = {
                tooltip: {
                    show: false
                },
                series: [{
                    name: '平台关键词',
                    type: 'wordCloud',
                    size: ['100%', '100%'],
                    textRotation: [0, 45, 90, -45],
                    textPadding: 0,
                    autoSize: {
                        enable: false,
                    },
                    data: platformJson['keywords']
                }]
            };

            plot41.setOption(option);
        }
    );

    var drawing = false;
    var platformdata = platformJson['platformdata'];
    var param1 = '成交量';
    var param2 = '利率';
    var params = ['成交量', '利率', '当日待还金额', '资金净流入', '投资人数', '借款人数', '人均投资金额', '人均借款金额', '借款标数', '平均借款期限', '待收投资人数', '待还借款人数'];
    var index1 = 0;
    var index2 = 1;
    var plot4 = echarts.init(document.getElementById('plot4'), 'dark');
    var plot4_option = {
        tooltip: {
            trigger: 'axis',
            formatter: function(obj) {
                return obj[0]['name'] + '<br/>' + param1 + '：' + obj[0]['value'] + platformdata[param1][0] + '<br/>' + param2 + '：' + obj[1]['value'] + platformdata[param2][0];
            }
        },
        calculable: true,
        grid: {
            x: 70,
            x2: 70,
            y: 60,
            y2: 95,
        },
        dataZoom: [{
            show: true,
            realtime: true,
            start: 80,
            end: 100,
            bottom: 25,
            fillerColor: 'rgba(0, 0, 0, 0.4)',
            handleColor: 'rgba(0, 0, 0, 0.8)',
            showDetail: false
        }],
        xAxis: {
            type: 'category',
            data: platformdata['x'],
            axisTick: {
                show: true
            },
            axisLine: {
                show: true
            },
            axisLabel: {
                margin: 12
            }
        },
        yAxis: [{
            type: 'value',
            axisTick: {
                show: true
            },
            axisLine: {
                show: true
            },
            scale: true,
            splitLine: {
                show: false
            }
        }, {
            type: 'value',
            axisTick: {
                show: true
            },
            axisLine: {
                show: true
            },
            scale: true,
            splitLine: {
                show: false
            }
        }],
        series: [{
            name: param1,
            type: 'line',
            symbol: 'none',
            smooth: true,
            data: platformdata[param1][1]
        }, {
            name: param2,
            type: 'line',
            symbol: 'none',
            smooth: true,
            yAxisIndex: 1,
            data: platformdata[param2][1]
        }]
    };
    plot4.setOption(plot4_option);

    function redraw() {
        drawing = true;
        $('#param1 .param').text(param1);
        $('#param2 .param').text(param2);
        plot4_option = {
            tooltip: {
                trigger: 'axis',
                formatter: function(obj) {
                    return obj[0]['name'] + '<br/>' + param1 + '：' + obj[0]['value'] + platformdata[param1][0] + '<br/>' + param2 + '：' + obj[1]['value'] + platformdata[param2][0];
                }
            },
            calculable: true,
            grid: {
                x: 70,
                x2: 70,
                y: 60,
                y2: 95,
            },
            dataZoom: [{
                show: true,
                realtime: true,
                start: 80,
                end: 100,
                bottom: 25,
                fillerColor: 'rgba(0, 0, 0, 0.4)',
                handleColor: 'rgba(0, 0, 0, 0.8)',
                showDetail: false
            }],
            xAxis: {
                type: 'category',
                data: platformdata['x'],
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisLabel: {
                    margin: 12
                }
            },
            yAxis: [{
                type: 'value',
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                scale: true,
                splitLine: {
                    show: false
                }
            }, {
                type: 'value',
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                scale: true,
                splitLine: {
                    show: false
                }
            }],
            series: [{
                name: param1,
                type: 'line',
                symbol: 'none',
                smooth: true,
                data: platformdata[param1][1]
            }, {
                name: param2,
                type: 'line',
                symbol: 'none',
                smooth: true,
                yAxisIndex: 1,
                data: platformdata[param2][1]
            }]
        };
        plot4.setOption(plot4_option);
        setTimeout(function() {
            drawing = false;
        }, 1000);
    }

    $('#param1 .fa-chevron-left').click(function(event) {
        if (!drawing) {
            index1 -= 1;
            if (index1 < 0) {
                index1 = params.length - 1;
            }
            param1 = params[index1];
            if (param1 == param2) {
                index1 -= 1;
                if (index1 < 0) {
                    index1 = params.length - 1;
                }
                param1 = params[index1];
            }

            setTimeout(function() {
                redraw();
            }, 100);
        }
    });

    $('#param1 .fa-chevron-right').click(function(event) {
        if (!drawing) {
            index1 += 1;
            if (index1 == params.length) {
                index1 = 0;
            }
            param1 = params[index1];
            if (param1 == param2) {
                index1 += 1;
                if (index1 == params.length) {
                    index1 = 0;
                }
                param1 = params[index1];
            }

            setTimeout(function() {
                redraw();
            }, 100);
        }

    });

    $('#param2 .fa-chevron-left').click(function(event) {
        if (!drawing) {
            index2 -= 1;
            if (index2 < 0) {
                index2 = params.length - 1;
            }
            param2 = params[index2];
            if (param2 == param1) {
                index2 -= 1;
                if (index2 < 0) {
                    index2 = params.length - 1;
                }
                param2 = params[index2];
            }

            setTimeout(function() {
                redraw();
            }, 100);
        }

    });

    $('#param2 .fa-chevron-right').click(function(event) {
        if (!drawing) {
            index2 += 1;
            if (index2 == params.length) {
                index2 = 0;
            }
            param2 = params[index2];
            if (param2 == param1) {
                index2 += 1;
                if (index2 == params.length) {
                    index2 = 0;
                }
                param2 = params[index2];
            }

            setTimeout(function() {
                redraw();
            }, 100);
        }
    });

    var plot5_margin = [30, 30, 75, 30];
    var plot5_width = 1000 - plot5_margin[1] - plot5_margin[3];
    var plot5_height = 400 - plot5_margin[0] - plot5_margin[2];
    var plot5_colors = ['rgb(84, 148, 191)', 'rgb(221, 107, 102)', 'rgb(145, 202, 140)', 'rgb(238, 221, 120)'];
    var plot5_types = ['寄语', '发展', '荣誉', '来访'];
    var plot5_status = [1, 1, 1, 1];

    function timeline() {
        var timeline_index = [];
        for (var i = 0; i < platformJson['timeline'].length; i++) {
            if (platformJson['timeline'][i]['type'] == 'e' && plot5_status[0] == 1) {
                timeline_index.push(i);
            } else if (platformJson['timeline'][i]['type'] == 'd' && plot5_status[1] == 1) {
                timeline_index.push(i);
            } else if (platformJson['timeline'][i]['type'] == 'a' && plot5_status[2] == 1) {
                timeline_index.push(i);
            } else if (platformJson['timeline'][i]['type'] == 'v' && plot5_status[3] == 1) {
                timeline_index.push(i);
            }
        }
        var timeline = d3.select('#plot5 svg g').selectAll('rect').data(timeline_index, function(d) {
            return d;
        })

        var tmp = [];
        timeline.transition().delay(function(d, i) {
            return i * 5;
        }).duration(800).attr('y', function(d, i) {
            if (!tmp.hasOwnProperty(platformJson['timeline'][d]['x'])) {
                tmp[platformJson['timeline'][d]['x']] = 1;
                return 325;
            } else {
                tmp[platformJson['timeline'][d]['x']] += 1;
                return 325 - 12 * (tmp[platformJson['timeline'][d]['x']] - 1);
            }
        }).attr('name', function(d) {
            return d;
        }).attr('stroke-width', 1);
        timeline.enter().append('rect').attr({
            x: function(d) {
                return plot5_margin[3] + plot5_width * platformJson['timeline'][d].x - 30;
            },
            y: function(d) {
                // return plot5_margin[0] + plot5_height * (1 - d.y);
                return 325;
            },
            'width': '60px',
            'height': '9px',
            'fill': function(d) {
                if (platformJson['timeline'][d].type == 'e') {
                    return plot5_colors[0];
                } else if (platformJson['timeline'][d].type == 'd') {
                    return plot5_colors[1];
                } else if (platformJson['timeline'][d].type == 'a') {
                    return plot5_colors[2];
                } else {
                    return plot5_colors[3];
                }
            },
            'fill-opacity': 0,
            'name': function(d) {
                return d;
            },
            'stroke-width': 1
        }).transition().delay(function(d, i) {
            return i * 5;
        }).duration(800).attr({
            'fill-opacity': 1,
            'y': function(d, i) {
                if (!tmp.hasOwnProperty(platformJson['timeline'][d]['x'])) {
                    tmp[platformJson['timeline'][d]['x']] = 1;
                    return 325;
                } else {
                    tmp[platformJson['timeline'][d]['x']] += 1;
                    return 325 - 12 * (tmp[platformJson['timeline'][d]['x']] - 1);
                }
            }
        });
        timeline.exit().transition().duration(800).attr({
            x: function() {
                if (Math.random() > 0.5) {
                    return plot5_margin[3];
                } else {
                    return plot5_margin[3] + plot5_width;
                }
            },
            'y': plot5_margin[0],
            'fill-opacity': 0
        }).remove();
    }

    timeline();

    var plot5_axis = [{
        'x10': 500,
        'x20': 500,
        'y10': 350,
        'y20': 350,
        'x11': plot5_margin[3],
        'x21': plot5_margin[3] + plot5_width,
        'y11': 350,
        'y21': 350,
    }];

    for (var i = 0; i < 9; i++) {
        plot5_axis.push({
            'x10': 82 + i * plot5_width / 9,
            'x20': 82 + i * plot5_width / 9,
            'y10': 350,
            'y20': 350,
            'x11': 82 + i * plot5_width / 9,
            'x21': 82 + i * plot5_width / 9,
            'y11': 350,
            'y21': 344,
        });
    }

    d3.select('#plot5 svg g').selectAll('line').data(plot5_axis).enter().append('line').attr({
        'x1': function(d) {
            return d.x10;
        },
        'y1': function(d) {
            return d.y10;
        },
        'x2': function(d) {
            return d.x20;
        },
        'y2': function(d) {
            return d.y20;
        },
        'stroke': 'rgba(250,250,250,0.5)',
        'stroke-width': 1,
        'shape-rendering': 'crispEdges'
    }).transition().duration(600).attr({
        'x1': function(d) {
            return d.x11;
        },
        'y1': function(d) {
            return d.y11;
        },
        'x2': function(d) {
            return d.x21;
        },
        'y2': function(d) {
            return d.y21;
        },
    });
    d3.select('#plot5 svg g').selectAll('text').data(['2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015']).enter().append('text').text(function(d) {
        return d;
    }).attr({
        'fill': '#fff',
        'fill-opacity': 0,
        'x': function(d, i) {
            return 82 + i * plot5_width / 9 - 14;
        },
        'y': 370,
        'font-size': 12
    }).transition().duration(600).attr('fill-opacity', .8);

    for (var i = 0; i < plot5_colors.length; i++) {
        $('#plot5 #control_panel').append("<div class='controller' id='controller" + i + "'><div style='width:24px;height:12px;background-color:" + plot5_colors[i] + "'></div> " + plot5_types[i] + "</div>")
    }

    $('#plot5 .controller').click(function() {
        var rect = $(this);
        var tmp = parseInt(rect.attr('id').charAt(rect.attr('id').length - 1));
        if (plot5_status[tmp]) {
            plot5_status[tmp] = 0;
            rect.css('color', '#888');
            rect.children('div').css('background-color', '#888');
        } else {
            plot5_status[tmp] = 1;
            rect.css('color', '#f2f2f2');
            rect.children('div').css('background-color', plot5_colors[tmp]);
        }
        timeline();
    });

    // $('#plot5 .controller').dblclick(function() {
    //     var rect = $(this);
    //     var tmp = parseInt(rect.attr('id').charAt(rect.attr('id').length - 1));
    //     $('#plot5 .controller').css('color', '#888');
    //     $('#plot5 .controller div').css('background-color', '#888');
    //     rect.css('color', '#f2f2f2');
    //     rect.children('div').css('background-color', plot5_colors[tmp]);
    //     for (var i = 0; i < plot5_status.length; i++) {
    //         plot5_status[i] = 0;
    //     }
    //     plot5_status[tmp] = 1;

    //     timeline();
    // });

    $('#plot5 rect').hover(function() {
        var tmp = parseInt($(this).attr('name'));
        var color_tmp = 0;
        if (platformJson['timeline'][tmp]['type'] == 'e') {
            color_tmp = 0;
        } else if (platformJson['timeline'][tmp]['type'] == 'd') {
            color_tmp = 1;
        } else if (platformJson['timeline'][tmp]['type'] == 'a') {
            color_tmp = 2;
        } else if (platformJson['timeline'][tmp]['type'] == 'v') {
            color_tmp = 3;
        }
        $('#plot5 #cell h5').css('color', plot5_colors[color_tmp]).text(platformJson['timeline'][tmp]['title']);
        $('#plot5 #cell h6').text(platformJson['timeline'][tmp]['timestamp']);
        $('#plot5 #cell p').text(platformJson['timeline'][tmp]['content']);
    }, function() {
        // $('#plot5 #cell h5').text('');
        // $('#plot5 #cell p').text('');
    });
});
</script>
{% endblock %}